<template>
    <div class="con_box">
        <!-- 搜索栏目开始 -->
        <div class="search_column">
            <el-form ref="searchForm" :inline="true" :model="table.queryParams" label-width="110px" size="mini">

                <el-form-item label="店铺名称或代码："  label-width="150px">
                    <el-input v-model="table.queryParams.keyWord" clearable placeholder="请输入店铺名称或代码"></el-input>
                </el-form-item>

                <el-form-item label="店铺类型：" prop="typeId">
                    <el-select v-model="table.queryParams.typeId" clearable filterable remote reserve-keyword 
                    placeholder="请选择店铺类型">
                        <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.dictValue"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="">
                    <el-button type="primary" size="mini" icon="el-icon-search" @click="searchSubmit">查 询</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-refresh" @click="resetSubmit(table.queryParams)">重置</el-button>
                </el-form-item>

            </el-form>
        </div>
        <!-- 搜索栏目结束 -->
        <!-- 操作栏开始 -->
        <div class="btns_column clearfix">
            <div class="fl">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleMethod">添加店铺</el-button>
            </div>
            <div class="fr">

            </div>
        </div>
        <!-- 操作栏结束 -->
        <vue-table 
            :api-url="table.apiUrl" 
            :fields="table.fields" 
            :appendParams="table.queryParams" 
            :content="self" ref="tableList">
        </vue-table>

        <add-dialog ref="addDialog"></add-dialog>
        <detail-dialog ref="detailDialog"></detail-dialog>
    </div>
</template>

<script>
    import add_dialog from "./add_dialog"
    import detail_dialog from "./detail_dialog"
    import moment from 'moment'
    export default {
        components: {
            "add-dialog": add_dialog,
            "detail-dialog": detail_dialog,
        },
        data() {
            return {
                self: this,
                show:false,
                loading: false,
                table: {
                    apiUrl: api.shopsManagement.shopsList,
                    queryParams: {
                        typeId: ''
                    },
                    fields: [{
                            prop: "__index",
                            width: "60",
                            label: "序号",
                        },
                        {
                            prop: "name",
                            label: "店铺名称",
                        },
                        {
                            prop: "code",
                            label: "店铺代码",
                        },
                        {
                            prop: "isRoot",
                            label: "直营店铺",
                        },
                        {
                            prop: "linkman",
                            label: "联系电话",
                        },
                        {
                            prop: "region",
                            label: "所属区域",
                        },
                        {
                            prop: "description",
                            label: "描述",
                        },
                        // {
                        //     prop: "typeId",
                        //     label: "类型",
                        // },
                        {
                            prop: "__action",
                            label: "操作",
                            width: 150,
                            actions: [
                                {
                                    label: "编辑",
                                    type: "edit",
                                    func: function(vm, row) {
                                        vm.$refs.addDialog.showDialog(row);
                                    }
                                },
                                {
                                    label: "详情",
                                    type: "edit",
                                    func: function(vm, row) {
                                        vm.$refs.detailDialog.showDialog(row);
                                    }
                                },
                                {
                                    label: "删除",
                                    type: "delete",
                                    func: function(vm, row) {
                                        vm.deleteMethod(row.id);
                                    }
                                }
                            ]
                        }
                    ],
                },
                options:{
                    shopOptions:[],
                    userOptions:[]
                },
            }
        },
        methods: {
            //  用户信息异步检索
            remoteMethod(query) {
                if (query !== '' && query.length>2 ) {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        this.getUserList(query);
                    }, 200);
                } else {
                    this.options4 = [];
                }
            },
            // 获取店铺类型数据
            getShopTypeList(name) {
                let vm = this;
                vm.axios.get(api.dictionary.dictList + "?type=shop").then((response) =>{
                    if (response.data.code == 200) {
                        console.log(response.data.data.dataList);
                        vm.options = response.data.data.dataList;
                    } else {
                        Message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    }
                })
            },
            //获取相册的详情信息
            getPicasaToolList(){
                let vm = this;
                vm.axios.get(api.picasaToolManagement.picasaToolList_No).then((response) => {
                    if(response.data.code == 200){
                        this.albumOptions = response.data.data;
                    }else{
                        vm.$message.error(response.data.message);
                    }
                });
            },
            // 查询
            searchSubmit() {
                this.$refs.tableList.$emit('vuetable:refresh');
            },
            //重置
            resetSubmit(val) {
                for (var key in val) {
                    val[key] = '';
                }
                this.$refs.tableList.$emit('vuetable:refresh');
            },
            // 添加
            handleMethod() {
                this.$refs.addDialog.showDialog();
            },
            // 删除用户
            deleteMethod(id) {
                let vm = this;
                vm.$confirm('是否删除该条记录！', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        vm.axios.delete(api.shopsManagement.shopsList+'/'+id)
                        .then((response) => {
                            if(response.data.code == 200){
                                vm.$message.success(response.data.message);
                                vm.$refs.tableList.$emit('vuetable:current-refresh');
                            }else{
                                vm.$message.error(response.data.message);
                            }
                        });
                    }, () => {})
            },
        },
        watch: {
            // 检测路由地址变化，触发vue-table的更新
            '$route' (to, from) {
                this.table.queryParams.typeId = this.$store.state.circleList[_.last(this.$route.path.split("/"))];
                this.$refs.tableList.$emit('vuetable:refresh');
            }
        },
        created(){
            // 获取当前页面的typeId
            this.table.queryParams.typeId = this.$store.state.circleList[_.last(this.$route.path.split("/"))];
        },
        mounted() { 
            this.getPicasaToolList();
            this.getShopTypeList();
        }
    }
</script>